<template>
  <div class="warpper-box">
    <a-form layout="inline" style="margin-bottom: 10px;">
      <a-form-item label="城市">
        <a-input placeholder="请输入城市首字母" v-model="params.initial"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="getList(true)">搜索</a-button>
        <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
        <a-button type='primary' v-action:addPolicycode icon="plus" @click="$refs.addInfo.add()">添加配置项</a-button>
      </a-form-item>
    </a-form>
    <a-collapse expandIconPosition="right">
      <a-collapse-panel :header="item.cityName" v-for="item in cityList" :key="item.cityId">
        <a-button type="link" slot="extra" @click.stop="$refs.addInfo.add(item.cityId,item.cityName)">编辑</a-button>
        <a-popconfirm slot="extra" title="确认删除？" ok-text="确认" cancel-text="取消" @confirm.stop="removeCity(item.cityId)">
          <a>删除</a>
        </a-popconfirm>
        <div class="content">
          <a-row>
            <a-col :span="12" style="padding: 0 120px;text-align: center;">
              <a-row>
                <a-col :span="8">
                  社保类型
                </a-col>
                <a-col :span="16">
                  <a-space direction="vertical">
                    <div v-if="item.typeInfo.insureTypes.length > 0">
                      <div v-for="b in item.typeInfo.insureTypes" :key="b.typeId">{{ b.typeName }}</div>
                    </div>
                    <a-empty v-else style="margin: 40px auto;"/>
                  </a-space>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12" style="padding: 0 120px;text-align: center;border-left: 1px solid #ccc;">
              <a-row>
                <a-col :span="8">
                  公积金比例
                </a-col>
                <a-col :span="16">
                  <a-space direction="vertical">
                    <div v-if="item.typeInfo.fundsTypes.length > 0">
                      <div v-for="c in item.typeInfo.fundsTypes" :key="c.typeId">{{ c.typeName }}</div>
                    </div>
                    <a-empty v-else style="margin: 40px auto;"/>
                  </a-space>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
      </a-collapse-panel>
    </a-collapse>
    <a-pagination style="text-align: right;margin: 20px 0;" :default-current="1" :total="total" @change="pageChange" />
    <!-- 新增|编辑 -->
    <add-info ref="addInfo" @on-ok="reset"></add-info>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
import {
  pageCity,
  cityDelete
} from "@/api/human/park"
import AddInfo from "./scale_config_add.vue"
export default {
  name: 'scaleConfig',
  components: {
    AddInfo
  },
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10,
        initial: '',
      },
      total: 0,
      cityList: [],
    }
  },
  mounted() {

  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  activated() {
    this.getList(true);
  },
  methods: {
    // 获取政列表
    async getList(flag) {
      let params = this.params;
      if (flag) {
        this.params.pageNum = 1;
        this.params.pageSize = 10;
      }
      const { code, data } = await pageCity(params);
      if (code === '1') {
        this.cityList = data.content
        this.total = data.total
      }
    },
    pageChange(current, pageSize) {
      this.params.pageNum = current;
      this.params.pageSize = pageSize;
      this.getList(false);
    },
    // 删除城市
    async removeCity(id) {
      const { code } = await cityDelete(id);
      if (code === '1') {
          this.$message.success('删除成功');
          this.getList();
      }
    },
    // 重置
    reset() {
      this.params.initial = '';
      this.getList(true);
    },
  }
}
</script>
<style lang="less" scoped>
.content {
  position: relative;
  line-height: 2;
}
</style>